<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>RealDOM-ref</title>
	<script src="../js/react.js"></script>
    <script src="../js/react-dom.js"></script>
    <script src="../js/browser.min.js"></script>
</head>
<body>
	<h1>Real DOM ref</h1>
	<div id="example"></div>
	<script type="text/babel">

		var LoginInput = React.createClass({
			handleChange: function(event){
				console.log(event);
			},
			render: function() {
				return <p>
							<label htmlFor={this.props.id}>{this.props.name}</label>
							<input id={this.props.id} name={this.props.name} type={this.props.type} placeholder={this.props.placeholder} className="my-text" onChange={this.handleChange} />
						</p>;
			}
		})

		var LoginForm = React.createClass({
			handleClick: function() {

			},
			render: function() {
				return (<div className="my-form">
					{
						React.Children.map(this.props.children, 
							function(child) {
								return <div>{child}</div>;
							}.bind(this)
						)
					}
					</div>
				);
			}
		});

		ReactDOM.render(
			<LoginForm>
				<LoginInput id="username" name="username" type="text" placeholder="please input username" />
				<LoginInput id="password" name="password" type="text" placeholder="please input password" />

				<input type="button" value="submit" />
			</LoginForm>,
			document.querySelector("#example")
		)
	</script>
</body>
</html>